<template>
	<up-navbar @leftClick="rightClick" placeholder :autoBack="true" bg-color="#F1F2F6 ">
		<template #center>
			<block v-if="produstData.status == 1">
				<view style="display: flex;align-items: center;font-size: 36rpx;font-weight: 500;color:#333">
					<up-icon name="clock" size="21"></up-icon>&nbsp;等待买家付款
				</view>
			</block>
			<block v-if="produstData.status == 2">
				<view style="display: flex;align-items: center;font-size: 36rpx;font-weight: 500;color:#333">
					<up-icon name="clock" size="21"></up-icon>&nbsp;待发货
				</view>
			</block>
			<block v-if="produstData.status == 3">
				<view style="display: flex;align-items: center;font-size: 36rpx;font-weight: 500;color:#333">
					<up-icon name="clock" size="21"></up-icon>&nbsp;待收货
				</view>
			</block>
			<block v-if="produstData.status == 4">
				<view style="display: flex;align-items: center;font-size: 36rpx;font-weight: 500;color:#333">
					<up-icon name="clock" size="21"></up-icon>&nbsp;已完成
				</view>
			</block>
			<block v-if="produstData.status == 5">
				<view style="display: flex;align-items: center;font-size: 36rpx;font-weight: 500;color:#333">
					<up-icon name="clock" size="21"></up-icon>&nbsp;已取消
				</view>
			</block>
		</template>
	</up-navbar>

	<!-- 未付 -->
	<view v-if="produstData.status == 1"
		style="width: 100%;height: 56rpx;text-align: center;line-height: 56rpx;font-size: 28rpx;position: fixed;z-index: 20;background:#F1F2F6;    display: flex;justify-content: center;align-items: center;">
		剩<up-count-down :time="time" format="mm:ss"></up-count-down>自动关闭</view>
	<!-- 取消 -->
	<view v-if="produstData.status == 5"
		style="width: 100%;height: 56rpx;text-align: center;line-height: 56rpx;font-size: 28rpx;position: fixed;z-index: 20;background:#F1F2F6 ;">
		取消原因：超时未支付</view>

	<view style="height: 56rpx;"></view> <!-- 占位 -->
	<view>
		<block v-if="produstData.status == 3">
			<!-- 收货 -->
			<view class="logistics-box">
				<up-steps current="1" direction="column" activeColor="#0B9EE2" dot>
					<up-steps-item title="仓库处理中  预计今天发货，9月7日送达">
						<template #icon>
							<img src="@/static/logistics.png" alt="" style="width: 36rpx;height: 36rpx;" />
						</template>
						<template #desc>
							<view style="font-size: 28rpx;color:#979797">快递运输，您的订单由第三方卖家拣货完成，待
								出库</view>
						</template>
					</up-steps-item>
					<up-steps-item title="已出库" desc="10:35">
						<template #desc>
							<view style="font-size: 28rpx;">
								您的订单由【客户指定地点】代收。如有疑问您可以联系配送员【由小唐，15812345678】确认。感谢您在杞滋堂购物，欢迎再次光临。</view>
						</template>
					</up-steps-item>
					<up-steps-item title="运输中" desc="11:40"></up-steps-item>
				</up-steps>
			</view>
		</block>
		<!-- 地址 -->
		<block v-else>
			<navigator url="/pages/address/address?source=1" class="address-section">
				<view class="order-content">
					<view class="yticon icon-shouhuodizhi">
						<up-icon name="map-fill" size="45rpx" color="#18C2FF"></up-icon>
					</view>
					<view class="cen">
						<view class="top">
							<text class="name">{{produstData.receiver_name}} {{produstData.receiver_mobile}}</text>
						</view>
						<text class="address">{{produstData.receiver_address}}</text>
					</view>
					<!-- <view class="yticon icon-you">
						<view
							style="width: 108rpx;height: 62rpx;border-radius: 64rpx;box-sizing: border-box;border: 2.4rpx solid #C4C4C4;text-align: center;line-height: 62rpx;font-size: 24rpx;color: #292A2E;">
							修改
						</view>
					</view> -->
				</view>
			</navigator>
		</block>

		<view class="goods-section">

			<!-- 商品列表 -->
			<block v-for="(item,index) in produstData.details" :key="index">
				<view class="g-item">
					<image
						src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=756705744,3505936868&fm=11&gp=0.jpg">
					</image>
					<view class="right">
						<view class="title clamp" style="margin-top: 18rpx;">{{item.goods_name}}</view>
						<view class="price-box">
							<text class="number" style="margin-left: 0;">{{item.attr}}</text>
							<text class="number">x {{item.num}}</text>

						</view>
						<view class="price">
							￥{{item.price}}
						</view>
					</view>
				</view>
			</block>
			<view style="display: flex;justify-content: flex-end;font-size: 24rpx;color: #868789;">
				共{{prolen}}种
			</view>
			<up-divider></up-divider>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{produstData.order_amount}}</text>
			</view>
			<!-- <view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">￥2368.00</text>
			</view> -->
			<view class="yt-list-cell desc-cell" style="justify-content: space-between;">
				<text class="cell-tit clamp">需付款</text>
				<text class="cell-tip" style="color:#EA0000">￥{{produstData.pay_amount}}</text>
			</view>
			<up-divider></up-divider>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">订单编号</text>
				<text class="cell-tip">{{produstData.tid}}</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">创建时间</text>
				<text class="cell-tip" style="color:#8D8989">{{produstData.order_time}}</text>
			</view>
			<view class="yt-list-cell b-b" v-if="produstData.status != 1">
				<text class="cell-tit clamp">支付方式</text>
				<text class="cell-tip" style="color:#8D8989">微信支付</text>
			</view>
			<view class="yt-list-cell b-b" v-if="produstData.status != 1">
				<text class="cell-tit clamp">支付时间</text>
				<text class="cell-tip" style="color:#8D8989">2023-09-05 10:09:05</text>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">下单时间</text>
				<text class="cell-tip" style="color:#8D8989">{{produstData.updated_at}}</text>
			</view>
			<!-- <view class="yt-list-cell b-b">
				<text class="cell-tit clamp">配送方式</text>
				<text class="cell-tip" style="color:#8D8989">快递运输</text>
			</view> -->
		</view>

		<!-- 底部 -->
		<view class="footer">
			<!-- <up-button type="info" customStyle="width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle" :plain="true" :hairline="true" color="#8D8989" text="修改地址" @click="goOther(1)"></up-button> -->
			<up-button type="info" customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle" :plain="true" :hairline="true" color="#08AFFE" text="继续付款"  @click="goOther(2)"></up-button>
			<!-- <up-button type="info" customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle" :plain="true" :hairline="true" color="#08AFFE" text="确认收货"  @click="goOther(3)"></up-button> -->
			<!-- <up-button type="info" customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle" :plain="true" :hairline="true" color="#08AFFE" text="再来一单"  @click="goOther(4)"></up-button> -->
			<!-- <up-button type="info" customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle" :plain="true" :hairline="true" color="#292A2E" text="申请退款"  @click="goOther(5)"></up-button> -->
			<!-- <up-button type="info"
				customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle"
				:plain="true" :hairline="true" color="#292A2E" text="退款/售后" @click="goOther(6)"></up-button>
			<up-button type="info"
				customStyle="float:right;width: 140rpx;height: 62rpx;margin-top:20rpx;margin-right:10rpx" shape="circle"
				:plain="true" :hairline="true" color="#292A2E" text="去评价" @click="goOther(7)"></up-button> -->
		</view>

		<salepop ref='afterSale'></salepop>
	</view>
</template>

<script>
	import salepop from '@/componets/after-sale-pop/after-sale-pop.vue'
	import {
		http
	} from 'uview-plus'
	export default {
		components: {
			salepop
		},
		data() {
			return {
				maskState: 0, //优惠券面板显示状态
				desc: '', //备注
				payType: 1, //1微信 2支付宝
				addressData: {
					name: '许小星',
					mobile: '13853989563',
					addressName: '金九大道',
					address: '山东省济南市历城区',
					area: '149号',
					default: false,
				},
				produstData: {}
			}
		},
		onLoad(options) {
			//商品数据
			this.order_id = options.order_id
			
		},
		onShow(){
			this.getData()
		},
		methods: {
			async getData() {
				await http.get('/shop/order/read', {
					params: {
						order_id: this.order_id
					}
				}).then(res => {
					console.log(res)
					this.produstData = res
					this.prolen = res.details.length
					if(res.status == 1){
						// const date = new Date();
						var nowTime = new Date().getTime()
						var creatTime = (new Date(res.order_time).getTime() )+ 1800000
						// console.log(creatTime-nowTime)
						// console.log(nowTime-creatTime)
						this.time = creatTime-nowTime
					}
				});
			},
			erChange(data) {
				this.number = data.number;
			},
			changePayType(type) {
				this.payType = type;
			},
			submit() {
				uni.redirectTo({
					url: '/pages/money/pay'
				})
			},
			rightClick() {
				uni.navigateBack({
					delta:1
				})
			},
			stopPrevent() {},
			goOther(index, item) {
				var  that = this
				switch (index) {
					case 1:
						uni.navigateTo({
							url: '/pages/address/address?source=1'
						})
						break
					case 2:
						uni.login({
						  provider: 'weixin', //使用微信登录
						  success: function (loginRes) {
							that.getCode(loginRes.code)
						  }
						});
						break
					case 3:
						break;
					case 4:
						break;
					case 5:
						break;
					case 6:
						this.$refs.afterSale.setup();
						break;
					case 7:
						uni.navigateTo({
							url: '/pages/order/evaluate'
						})
						break;
				}
			},
			async getCode(code){
				await http.post('/shop/user/openid', {				
						js_code: code
				}).then(res => {
					console.log(res)
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F1F2F6;
		padding-bottom: 100rpx;
	}

	.address-section {
		display: block;
		width: 718rpx;
		max-height: 184rpx;
		border-radius: 20rpx;
		padding: 30rpx 0;
		background: #fff;
		position: relative;
		margin: 0 auto;

		.order-content {
			display: flex;
			background: #fff;
			margin: 0 auto;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: flex-start;
			justify-content: center;
			width: 90rpx;
			color: #888;
			font-size: 44rpx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}

		.name {
			font-size: 32rpx;
			margin-right: 24rpx;
		}

		.address {
			margin-top: 16rpx;
			margin-right: 20rpx;
			color: #333;
		}

		.icon-you {
			font-size: 32rpx;
			color: #333;
			margin-right: 30rpx;
			display: flex;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5rpx;
		}
	}

	.logistics-box {
		width: 718rpx;
		min-height: 304rpx;
		border-radius: 16rpx;
		opacity: 1;
		padding: 30rpx 24rpx;
		background: #fff;
		margin: 0 auto;
		background: #FFFFFF;
		box-sizing: border-box;
	}

	.goods-section {
		background: #fff;
		padding: 1px 16rpx;
		box-sizing: border-box;
		width: 718rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 16rpx;
		opacity: 1;
		background: #FFFFFF;

		.g-header {
			display: flex;
			align-items: center;
			height: 84rpx;
			padding: 0 30rpx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50rpx;
			height: 50rpx;
			border-radius: 100px;
		}

		.name {
			font-size: 30rpx;
			color: #333;
			margin-left: 24rpx;
		}

		.g-item {
			display: flex;

			image {
				flex-shrink: 0;
				display: block;
				width: 140rpx;
				height: 140rpx;
				border-radius: 4rpx;
			}

			.right {
				flex: 1;
				padding-left: 24rpx;
				overflow: hidden;
				position: relative;

				.title {
					width: 400rpx;
				}

				.price {
					position: absolute;
					top: 18rpx;
					right: 0rpx;
					font-family: Source Han Sans;
					font-size: 28rpx;
					font-weight: 500;
					color: #272727;
				}
			}

			.title {
				font-size: 30rpx;
				color: #333;
			}

			.spec {
				font-size: 26rpx;
				color: #333;
			}

			.price-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				color: #333;
				padding-top: 10rpx;

				.price {
					margin-bottom: 4rpx;
				}

				.number {
					font-size: 26rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}

	.yt-list {
		margin: 0 auto;
		margin-top: 16rpx;
		background: #fff;
		padding-bottom: 1px;
		width: 718rpx;
		border-radius: 20rpx;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 0rpx 30rpx 0rpx 30rpx;
		line-height: 70rpx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
		}

		.cell-icon {
			height: 32rpx;
			width: 32rpx;
			font-size: 22rpx;
			color: #fff;
			text-align: center;
			line-height: 32rpx;
			background: #f85e52;
			border-radius: 4rpx;
			margin-right: 12rpx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24rpx;
			color: #eee;
			margin-left: 8rpx;
			margin-right: -10rpx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			margin-right: 10rpx;
		}

		.cell-tip {
			font-size: 26rpx;
			color: #272727;
			text-align: right;

			&.disabled {
				color: #333;
			}

			&.active {
				color: '#';
			}

			&.red {
				color: red;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 136rpx;
			}
		}

		.desc {
			flex: 1;
			font-size: 24rpx;
			color: #333;
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		width: 100%;
		height: 130rpx;
		font-size: 30rpx;
		background-color: #fff;
		z-index: 998;
		color: #333;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
	}
</style>